<template>

  <div class="home">
    <div class="home-main">
      <el-row class="top h-90% top_row">
        <el-col style="font-size:12px;padding-top:15px;padding-left:10px">
          <span class="msg-title">PDI信息输入</span>
        </el-col>
      <el-row class="top_rows">
        <el-col :span="3" style="font-size:12px">
            <div>
              <span>产品牌号</span>
              <el-input v-model="headerSearchForm.SteelGrade" placeholder="请输入" style="width:80px;height:20px;margin-left:4px;" />
            </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;">
            <div>
              <span>屈服强度</span>
              <el-input v-model="headerSearchForm.YP" placeholder="请输入" style="width:80px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;">
            <div>
              <span>入口厚度</span>
              <el-input v-model="headerSearchForm.res_EN_THICK" placeholder="请输入" style="width:80px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;">
            <div>
              <span>成品厚度</span>
              <el-input v-model="headerSearchForm.res_EX_THICK" placeholder="请输入" style="width:80px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;">
            <div>
              <span>宽度</span>
              <el-input v-model="headerSearchForm.res_EX_WIDTH" placeholder="请输入" style="width:80px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="3" style="font-size:12px;">
            <div>
              <el-button type="primary" @click="searchButtonClick" style="height:20px;margin-left:4px">查询工艺参数</el-button>
            </div>
        </el-col>
        <el-col :span="2" style="font-size:12px;">
            <div>
              <el-button type="primary" @click="handleQuote(scope.row)" style="height:20px;">批量导入</el-button>
            </div>
        </el-col>
      </el-row>
      <el-row class="top_rows" style="margin-bottom:10px">
        <el-col :span="5" style="font-size:12px;">
            <div>
              <span>任务名称</span>
              <el-input v-model="headerSearchForm.CoilNo" placeholder="请输入" style="width:160px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="5" style="font-size:12px;margin-left:10px">
            <div>
              <span>提交人</span>
              <el-input placeholder="请输入" style="width:160px;height:20px;margin-left:4px" />
            </div>
        </el-col>
        <el-col :span="5" style="font-size:12px;">
            <div>
              <span>备注</span>
              <el-input  placeholder="请输入" style="width:180px;height:20px;margin-left:4px" />
            </div>
        </el-col>


      </el-row>



      </el-row>

      <el-row class="top h-90% top_row">
        <el-col style="font-size:12px;padding-top:15px;padding-left:10px">
          <span class="msg-title">轧制规程参数</span>
        </el-col>
      
        <el-row class="top_rows" style="height:160px">
          <el-col style="font-size:12px;" :span="18">
              <el-table :data="topList" style="width: 100%;height:auto;" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }"
                              :cell-style="{fontSize:'12px'}">
                  <el-table-column prop="TITLE" label="轧制规程参数" />
                  <el-table-column prop="BEFORE" label="" />
                  <el-table-column prop="S5" label="S5" />
                  <el-table-column prop="S4" label="S4" />
                  <el-table-column prop="S3" label="S3" />
                  <el-table-column prop="S2" label="S2" />
                  <el-table-column prop="S1" label="S2" />
              </el-table>
              <div class="tabTable">
                <div v-for="(item,index) in tabTableList" :key="index">{{item}}</div>
              </div>
          </el-col>
          

          <el-col :span="5">
            <nercar-echarts
                  :graphic="echartsListOptions[0].graphic"
                  :title="echartsListOptions[0].title"
                  :grid="echartsListOptions[0].grid"
                  :x-axis="echartsListOptions[0].xAxis"
                  :y-axis="echartsListOptions[0].yAxis"
                  :tooltip="echartsListOptions[0].tooltip"
                  :series="echartsListOptions[0].series"
                  style="width:260px;height:190px !important;"
            />
          </el-col>
        </el-row>
        <el-row class="top_rows" style="margin-bottom:10px;margin-left:30px">
          <el-col :span="3" style="font-size:12px;">
            <div>
              <span>L</span>
              <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
            </div>
          </el-col>
          <el-col :span="3" style="font-size:12px;margin-left:10px">
              <div>
                <span>M</span>
                <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
              </div>
          </el-col>
          <el-col :span="3" style="font-size:12px;">
              <div>
                <span>N</span>
                <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
              </div>
          </el-col>
          <el-col :span="3" style="font-size:12px;">
            <div>
              <el-button type="primary" @click="handleQuote(scope.row)" style="height:20px;">设备极限能力</el-button>
            </div>
          </el-col>

        </el-row>
      </el-row>

      <el-row class="top h-90% top_row">
        <el-col style="font-size:12px;padding-top:15px;padding-left:10px">
          <span class="msg-title">仿真计算结果输出</span>
        </el-col>
        
      
        <el-row class="top_rows">
          <el-col style="font-size:12px;">
              <el-table :data="footTable" style="width: 98%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                  <el-table-column prop="卷号" label="计算结果" />
                  <el-table-column prop="钢种" label="BEFORE" />
                  <el-table-column prop="宽度" label="STD1" />
                  <el-table-column prop="厚度" label="STD2" />
                  <el-table-column prop="命中率" label="STD3" />
                  <el-table-column prop="命中率" label="STD4" />
                  <el-table-column prop="命中率" label="STD5" />
              </el-table>
          </el-col>
        </el-row>

      </el-row>



    </div>
  </div>
         
</template>

<script setup lang='ts'>
import {rollingSimulationApi} from  '/@/api/RollingSimulation/index'
import {reactive} from 'vue';
  interface SearchForm {
    SteelGrade: string,  //钢牌号
    YP: string,  //屈服强度
    res_EN_THICK: string,  //入口厚度
    res_EX_THICK: string,  //出口厚度
    res_EX_WIDTH: string,  //出口宽度
    CoilNo: string,  //卷号或者叫任务名称
  }
 const headerSearchForm = reactive<SearchForm>({
    SteelGrade: '',
    YP: '', 
    res_EN_THICK: '',
    res_EX_THICK: '',
    res_EX_WIDTH: '',
    CoilNo: '',
  });
  const TITLES = ['工作辊直径(mm)', '比变形率', '轧制卷数'];
  const ARRAYLIST = TITLES.map(item => ({
      TITLE:item,
      BEFORE:'',
      S5:'',
      S4:'',
      S3:'',
      S2:'',
      S1:'',
    }))
  const topList = reactive(ARRAYLIST);
  const tabTableList = ref(['单位张力(MPa)'])
  const footTable = ref([
    { 卷号: '工作辊直径(mm)', 钢种: '-', 宽度: '430', 厚度: '440', 命中率: '450' },
    { 卷号: '单位张力(MPa)', 钢种: '40', 宽度: '97.4', 厚度: '121', 命中率: '134.8' },
    { 卷号: '比变形率', 钢种: '-', 宽度: '32', 厚度: '30', 命中率: '26' },
    { 卷号: '轧制卷数', 钢种: '-', 宽度: '100', 厚度: '100', 命中率: '100' },
    { 卷号: '支撑辊辊径(mm)', 钢种: '-', 宽度: '1300', 厚度: '1300', 命中率: '1300' },
  ]);
  const echartsListOptions=[
    {
      title: {
        show: true,
        text: '变形抗力',
        textStyle: {
          color: 'black',
          fontSize:12,
        }
      },

      graphic: [
      {
          type: 'text',
          bottom: 45, // 距离底部的固定距离
          right: 16, // 距离底部的固定距离
          style: {
          text: '(m)', // X轴名称
          fill: 'black',
          fontSize: 12,
          align: 'center'
          }
      }
      ],
      toolbox: {
      feature: {
          dataZoom: {
          yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
      }
      },
      tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' }
      }
      },
      grid: {
          left: '10%',
          right: '17%',
          bottom: '9%',
          containLabel: true
      },
      dataZoom: [
      {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0]
      }, //X轴内置滑动
      {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0]
      }
      ],
      xAxis: [
      {
          type: 'category',
          name: '变形率(%)',
          nameLocation:'end',     //设置name位置  start或者end

          nameTextStyle: {

              color: "black",

              fontSize:8,

              padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离

          },
          data: ['A', 'B', 'C','D'],
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: 'black'
            }

          }

      }
      ],
      yAxis: {
          type: 'value',
          name: '屈服强度(MPa)',
          nameTextStyle: {
              fontSize:'8px',
              color: 'black' // 设置 y 轴名称的颜色为红色
          },
          scale: true, //纵坐标自适应
          splitLine:{
              show:false
          },
          axisLabel: {
            textStyle: {
              color: 'black'
            }

          }

      },
      series: [
      
      {
          name: '',
          data: [10, 22, 28, 43],
          type: 'line',
          stack: 'x',
          smooth: true,
          symbolSize: 1,
      }]
  }];
  function searchButtonClick(){
    let param = {
      "action": "send_msg",
      "body": {
        "msgId": 2026,
        "params": [
          [
            {...headerSearchForm}
          ]
        ],
        "sendTo": "TCM_SIM",
        "timeout": 5,
        "waitReply": true
      },
      "operator": "director",
      "terminal": "director"
    }
    rollingSimulationApi.HMI(param).then(res=>{
      tabTableList.value = ['单位张力(MPa)']
      const obj = res.data.results[0][0]
      for(let i=1;i<6;i++){
        topList[0]['S' + i] = obj['Diameter' + i]
        topList[1]['S' + i] = obj['Deform_Rate' + i]
        topList[2]['S' + i] = obj['Roll_Num' + i]
        tabTableList.value.push(obj['Unit_Tension' + (7 -i)])
      }
      tabTableList.value.push(obj.Unit_Tension1)
    })
  };
   
    
</script>

<style scoped lang="less">

.home {
  width: 100vw;
  background:none;
  background-image: linear-gradient(to top, white, @primary-color) !important;
  // height: 100%;
  // position: relative;
  // background-color: #fff;

  // &.linear-gradient {
  //   background-image: linear-gradient(to top, white, @primary-color) !important;
  // }
  

  .home-main {
    height: 100%;

    .top {
      width: 90%;
      
    }

    .middle {
      width: 100%;
      height: 280px;

      .svg {
        width: 100%;
        height: 100%;

        svg {
          margin-top: 4vh;
          width: 100%;
          height: 100%;
        }
      }
    }

    .footer {
      width: 100%;
      height: 240px;
    }
  }
}
.msg-title {
    top: -4vh;
    left: 39.5vw;
    font-size: 2vh;
    font-weight: bolder;
    color: white;
    width: 10vw;
}

:deep(.el-table .cell) {
  line-height:14px

}
::v-deep .el-table--enable-row-transition .el-table__body td{
  padding-top: 4px;
  padding-bottom:4px;
}

.top_row{
  // background-color: #1c2d5a;
  border-radius: 3px;
  margin-top:20px;
  margin-left:70px;
  border: 1px solid #fff;

  flex-shrink: 0;
  
}

.top_rows{
  width: 100%;
  padding-top: 10px;
  padding-left:25px
}
.tabTable{
  background-color:#fff;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:2px 40px 2px 10px;
  color:rgb(107, 105, 105);
}






</style>